<template>
    <div class="index">
        <van-swipe>
            <van-swipe-item class="swipe-item" v-for="item in swipeImages" :key="item.id">
                <img v-lazy="item.imageUrl"/>
            </van-swipe-item>
        </van-swipe>
        <ul class="grid">
            <li v-for="item in menu" :key="item.title">
                <div @click="goto(item.link)">
                    <img :src="item.image"/>
                    <h3>{{item.title}}</h3>
                </div>
            </li>
        </ul>
        <img class="banner" src="../../assets/banner3.jpg" alt/>
        <!-- 代理 -->
        <ul class="agent">
            <li v-for="item in agentList" :key="item.levelId">
                <div>
                    <h3>{{item.levelName}}</h3>
                    <p>{{item.levelRemark}}</p>
                    <button @click="goVipGoods(item.levelId)">立即购买</button>
                </div>
                <img :src="item.iconUrl" alt/>
            </li>
        </ul>
    </div>
</template>

<script>
    import url from "@/utils/api.js";
    import {
        Swipe,
        SwipeItem,
        Lazyload,
        TabbarItem,
        NoticeBar,
        Search,
        Row,
        Col,
        Rate
    } from "vant";
    import url_java from "../../utils/api_data";

    export default {
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [NoticeBar.name]: NoticeBar,
            [Search.name]: Search,
            [Row.name]: Row,
            [Col.name]: Col,
            [Rate.name]: Rate
        },

        data() {
            return {
                swipeImages: [],
                menu: [
                    {
                        title: "会员主页",
                        image: require("../../assets/imgList/vip.png"),
                        link: "vip"
                    },
                    {
                        title: "商城",
                        image: require("../../assets/imgList/mall.png"),
                        link: "home"
                    },
                    {
                        title: "成员订单",
                        image: require("../../assets/imgList/team.png"),
                        link: "memberorder"
                    },
                    {
                        title: "代理补货",
                        image: require("../../assets/imgList/buhuo.png"),
                        link: "replenish"
                    },
                    {
                        title: "提货链接",
                        image: require("../../assets/imgList/lianjie.png"),
                        link: "pickup"
                    },
                    {
                        title: "等级订单",
                        image: require("../../assets/imgList/team.png"),
                        link: "levelorder"
                    },
                    {
                        title: "代理升级",
                        image: require("../../assets/imgList/team.png"),
                        link: "upgrade"
                    }
                ],
                agentList: []
            };
        },

        mounted() {
            this.getBanner();
            this.getVipShow();
            this.getBannerShow();
        },
        methods: {
            getBanner() {
                this.$axios({
                    method: "get",
                    url: url_java.banner
                }).then(res => {
                    console.log(res);
                    this.swipeImages = res;
                });
            },
            getVipShow() {
                this.$axios({
                    method: "get",
                    url: url_java.level_list
                }).then(res => {
                    console.log(res);
                    // this.swipeImages = res.banner;
                    this.agentList = res;
                });
            },
            getBannerShow() {
                this.$axios({
                    method: "get",
                    url: url_java.banner
                }).then(res => {
                    console.log(res);
                    // this.swipeImages = res.banner;
                    this.swipeImages = res;
                });
            },
            goto(link) {
                this.$router.push({name: link});
            },
            goVipGoods(levelId) {
                this.$router.push({name: "vipgoods", query: {levelId: levelId}});
            }
        }
    };
</script>

<style lang="less" scoped>
    // @import '../../assets/style/common.less';
    // 优化写法  @符号代表src目录  但是样式引入样式 需要在@符号前面加个~
    // @import '~@/assets/style/common.less';
    //再次优化  配置好别名之后  可以简写为： 在main.js 里不用加~
    @import "~style/common.less";

    .van-icon-xingxing:before {
        content: "\e610";
        position: relative;
        top: 50%;
        // left: -2Px;
        transform: translateY(-20%);
    }

    // 1px border
    .setTopLine(@c:@borderColor) {
        position: relative;
        &:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid @c;
        }
        [data-dpr="1"] &:before {
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
        }
    }

    .index {
        // background-color: @borderColor;
        background-color: @bgColor;

        .grid {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            text-align: center;
            background-color: @bgColor;
            margin: 0 auto;
            padding: 15px;

            li {
                flex-basis: 25%;
                margin-bottom: 5px;

                img {
                    height: 30px;
                    width: 30px;
                }

                h3 {
                    .font-dpr(12px);
                    color: @fontColorP;
                    font-weight: 400;
                    line-height: 2;
                }
            }
        }

        /deep/ .van-swipe {
            // border: 1px solid red;
            text-align: center;

            img {
                width: 100%;
            }
        }

        .banner {
            max-width: 100%;
            background-size: cover;
        }
    }

    .van-tabbar {
        height: 48px;
        // transform: translateY(-50%);
        &-item {
            color: @fontColorH3 !important;

            &--active {
                color: @priColor !important;
            }

            &__icon {
                .font-dpr(16px) !important;
            }

            &__text {
                .font-dpr(12px) !important;
            }
        }
    }

    /deep/ .van-nav-bar .van-icon {
        .font-dpr(28px) !important;
        color: @fontColorP !important;
    }

    .product-title {
        .textoverflow(1);
    }

    .agent {
        // border:1px solid red;
        position: relative;
        top: -20px;
        width: 94vw;
        margin: 0 auto;
        box-sizing: border-box;

        li {
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            box-shadow: 0px 1px 21px 0px rgba(210, 216, 217, 0.2);
            border-radius: 8px;
            margin-bottom: 10px;

            h3 {
                color: @priColor;
                .font-dpr(16px);
                line-height: 3;
            }

            p {
                color: @fontColorP;
                .font-dpr(14px);
                line-height: 1.5;
            }

            img {
                width: 150px;
            }

            button {
                width: 80px;
                height: 30px;
                background: rgba(221, 206, 170, 1);
                border-radius: 6px;
                color: #fff;
            }
        }
    }
</style>
